<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-12-31 13:30:17
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:48:36
-->
<template>
  <div class="app-container">
    <div class="vipImg" v-if="!isVip">
      <img src="../../../assets/images/isVip.jpg" alt="" />
      <div class="vipBtn">
        <el-button
          type="primary"
          size="default"
          @click="$router.push('/sys/application')"
          >立即购买</el-button
        >
      </div>
    </div>
    <div v-else>
      <div class="header">
        <div class="bread">
          <span>证书托管</span>
        </div>
        <div class="search">
          <el-input
            v-model="input"
            placeholder="请输入证书/持有人"
            clearable
          ></el-input>
          <el-button type="primary" size="default" @click="search"
            >搜索</el-button
          >
        </div>
        <div class="btn">
          <el-button type="primary" size="default" @click="newQua"
            >新建托管</el-button
          >
        </div>
      </div>
      <div class="chooise" v-if="selShow">
        <span>场景：</span>
        <el-select
          v-model="value"
          ref="sel"
          clearable
          @visible-change="(v) => visibleChange(v, 'sel', selClick, admClick)"
          class="sel-sence"
          @change="querySceneList"
        >
          <el-option
            v-for="item in sceneOptions"
            :key="item.sceneId"
            :label="item.name"
            :value="item.sceneId"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          icon="iconfont icon-shaixuan"
          size="default"
          @click="screen"
        >
          高级筛选
        </el-button>
      </div>
      <div class="sel" v-else>
        <span> 已选中 {{ multipleSelection.length }} 项</span>
        <el-button
          type="primary"
          size="default"
          plain
          :disabled="disabled"
          @click="certChange"
        >
          更换
        </el-button>
        <el-button
          type="primary"
          size="default"
          :disabled="disabled"
          plain
          @click="certNnBinding"
        >
          解绑
        </el-button>
      </div>
      <div v-if="scenArr !== []" class="scenF">
        <div
          v-for="(item, index) in scenArr"
          :key="index"
          class="scenF-content"
        >
          <div class="scenF-detail" @click="scenSearch(item.sceneId)">
            {{ item.sceneList }}
            <i
              class="el-icon-circle-close"
              @click.stop="scenDel(index)"
              style="margin-left: 10px"
            ></i>
          </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :height="tableHight"
      >
        <template slot="empty" class="emptyBg">
          <img src="@/assets/images/empty.jpg" alt="" />
        </template>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="证书名称"
          align="center"
          prop="qualificationTypeId"
          fixed
        >
          <template slot-scope="scope">
            {{ scope.row.certType.certName }}
          </template>
        </el-table-column>
        <el-table-column label="持有人" align="center" prop="belongerName" />
        <el-table-column label="身份证号" align="center" prop="idCard" />
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column label="证书主图" align="center" prop="remark">
          <template slot-scope="scope">
            <el-image
              style="width: 100%"
              :src="scope.row.remark"
              :preview-src-list="[scope.row.remark]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="发证时间"
          align="center"
          prop="issueDate"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.issueDate, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="有效期"
          align="center"
          prop="certValidity"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.foreverValidity == "Y"
                ? "永久有效"
                : parseTime(scope.row.certValidity, "{y}-{m}-{d}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="certNumber">
          <template slot-scope="scope">
            <span class="dotAll">
              <i
                class="iconfont icon-yuandian dot"
                v-if="dotType(scope.row) == '正常'"
                style="color: #86c142"
              ></i>
              <i
                class="iconfont icon-yuandian dot"
                v-if="dotType(scope.row) == '已过期'"
                style="color: red"
              ></i>
              {{
                scope.row.foreverValidity == "Y"
                  ? "正常"
                  : compareDate(scope.row.certValidity)
                  ? "正常"
                  : "已过期"
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="服务商" align="center" prop="serviceName" />
        <el-table-column
          label="托管时间"
          align="center"
          prop="trusteeshipTime"
          width="180"
        />
      </el-table>
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout=" ->,total, sizes,prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
      <new-qua :dialog="dialog"></new-qua>
      <manage-screen
        :dialog="dialog"
        v-if="dialog.screenEcejt"
        @sceneArr="sceneArr"
      ></manage-screen>
      <drag-table
        :dialog="dialog"
        v-if="dialog.senceAdminEject"
        ref="dragTable"
      ></drag-table>
      <!-- 更换负责人 -->
      <el-dialog
        title="更换负责人"
        :visible.sync="dialog.dialogPerCha"
        width="50%"
        @close="perClose"
        custom-class="dialogClass"
        :close-on-click-modal="false"
      >
        <charge-person
          v-if="dialog.dialogPerChaEject"
          ref="chaPer"
        ></charge-person>
        <span slot="footer">
          <el-button @click="dialog.dialogPerCha = false"> 取消 </el-button>
          <el-button type="primary" @click="onChangeChar"> 确定 </el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import NewQua from "./conponents/newQua.vue";
import {
  trusteeshipedList,
  checkTrusteeship,
  certChange,
  unBinding,
  getServices,
} from "@/api/enCert/certDeposit";
import DragTable from "./conponents/dragTable.vue";
import ManageScreen from "./conponents/manageScreen.vue";
import { queryScene } from "@/api/currency";
import { check } from "@/api/purchase";
import Purchase from "@/components/purchase";
// 负责人
import chargePerson from "@/components/chargePerson";
export default {
  components: {
    NewQua,
    DragTable,
    ManageScreen,
    Purchase,
    chargePerson,
  },
  data() {
    return {
      tableHight: window.innerHeight - 330,
      charge: "",
      isVip: true,
      type: 1,
      pageNum: 1,
      pageSize: 10,
      disabled: false,
      total: 0,
      input: "",
      value: "",
      selShow: true,
      tableData: [],
      scenArr: [],
      chargerOptions: [],
      multipleSelection: [],
      //场景
      sceneOptions: [],
      dialog: {
        newQuaShow: false,
        newQuaShowEject: false,
        dialogTableVisible: false,
        dialogScreenVisible: false,
        screenEcejt: false,
        dialogPerCha: false,
        dialogEnter: false,
        senceAdmin: false, //场景管理
        senceAdminEject: false,
        distributionShow: false,
        distributionShowEject: false,
      },
    };
  },
  created() {
    this.checkTrusteeship();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  watch: {
    input(newValue, oldValue) {
      if (newValue == "") {
        this.getList();
      }
    },
  },
  methods: {
    dotType(row) {
      let val = "";
      if (row.foreverValidity == "Y") {
        val = "正常";
      } else {
        if (this.compareDate(row.certValidity)) {
          val = "正常";
        } else {
          val = "已过期";
        }
      }
      return val;
    },
    // 关闭更换负责人
    perClose() {
      this.charge = "";
      this.dialog.dialogPerChaEject = false;
    },
    // 确定更换
    onChangeChar() {
      if (this.charge == "") return this.$message.error("请选择服务商");
      certChange({
        certId: this.multipleSelection[0].id,
        serviceId: this.charge,
      }).then((res) => {
        this.$message.success(res.msg);
        this.dialog.dialogPerCha = false;
        this.getList();
      });
    },
    //获取服务商
    getChargeList() {
      getServices({
        type: 3,
      }).then((res) => {
        this.chargerOptions = res.data;
      });
    },
    // 更换服务商
    certChange() {
      this.dialog.dialogPerChaEject = true;
      this.$nextTick(function () {
        this.dialog.dialogPerCha = true;
      });
    },
    // 解绑
    async certNnBinding() {
      const confirmResult = await this.$confirm(
        "此操作将和已绑定服务商解绑, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        unBinding({
          certId: this.multipleSelection[0].id,
          serviceId: this.multipleSelection[0].serviceId,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getList();
        });
      }
    },

    // 查询是否购买会员
    checkTrusteeship() {
      checkTrusteeship({ type: 3 }).then((res) => {
        this.isVip = res.data;
        if (res.data == true) {
          this.getList();
          this.getScene();
        }
      });
    },
    // 新建资质
    newQua() {
      this.dialog.newQuaShow = true;
    },
    // 打开高级筛选
    screen() {
      this.dialog.screenEcejt = true;
      this.$nextTick(function () {
        this.dialog.dialogScreenVisible = true;
      });
    },
    // 请求场景
    getScene() {
      queryScene({
        type: 27,
      }).then((res) => {
        if (res.default !== null) {
          res.scenes.unshift(res.default);
          this.sceneOptions = res.scenes;
        } else {
          this.sceneOptions = res.scenes;
        }
      });
    },
    // 点击临时搜索
    scenSearch(id) {
      this.getList(id);
    },
    // 删除临时搜索
    scenDel(i) {
      this.scenArr.splice(i, 1);
      if (this.scenArr.length == 0) {
        this.getList();
      }
    },
    // 获取数组
    sceneArr(data) {
      this.scenArr.push(data);
    },
    querySceneList() {
      this.getList(this.value);
    },
    //管理
    admClick() {
      this.dialog.senceAdminEject = true;
      this.$nextTick(function () {
        this.dialog.senceAdmin = true;
      });
    },
    //新建场景
    selClick() {
      this.screen();
    },
    // 场景下拉框按钮
    visibleChange(visible, refName, onClick, onClick2) {
      if (visible) {
        const ref = this.$refs[refName];
        let popper = ref.$refs.popper;
        if (popper.$el) popper = popper.$el;
        if (
          !Array.from(popper.children).some(
            (v) => v.className === "el-cascader-menu__list"
          )
        ) {
          const el = document.createElement("ul");
          el.className = "el-cascader-menu__list";
          el.style =
            "border-top: solid 1px #E4E7ED; padding:0; color: #606266;";
          el.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>新建场景</span>
                            </li>
                        `;
          const el2 = document.createElement("ul");
          el2.className = "el-cascader-menu__list";
          el2.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>管理</span>
                            </li>
                        `;
          popper.appendChild(el);
          popper.appendChild(el2);
          el2.onclick = () => {
            onClick2 && onClick2();
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
          el.onclick = () => {
            // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
            onClick && onClick();
            // 以下代码实现点击后弹层隐藏 不需要可以删掉
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
        }
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    // 分页器
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    search() {
      this.getList();
    },
    // 获取表格数据
    getList(val) {
      console.log(1);
      trusteeshipedList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sceneId: val,
        identification: this.input,
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 表格前多选器
    handleSelectionChange(val) {
      this.selShow = false;
      this.multipleSelection = val;
      if (val.length == 0) {
        this.selShow = true;
      }
      if (val.length > 1) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.vipImg {
  padding-top: 10px;
  width: 100%;
  height: 100%;
  position: relative;
  img {
    height: 100%;
    width: 100%;
  }
  .vipBtn {
    position: absolute;
    top: 8%;
    right: 6%;
  }
}
.header {
  width: 100%;
  height: 74px;
  display: flex;
  border-bottom: 1px solid #ececec;
  justify-content: space-between;
  align-items: center;
  .bread {
    margin-left: 5px;
    border-bottom: 2px solid #1267fa;
    font-size: 16px;
    font-weight: 700;
    height: 74px !important;
    height: 30px;
    display: flex;
    line-height: 74px;
    span {
      font-size: 16px;
      padding: 0 10px;
    }
  }
  .search {
    display: flex;
    /deep/ .el-input__inner {
      height: 40px;
    }
  }
}
.chooise {
  margin-top: 20px;
  .sel {
    margin: 0 14px;
  }
  .sel-sence {
    margin-right: 20px;
  }
  .el-button {
    font-size: 14px;
    /deep/ span {
      margin-left: 5px;
    }
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.sel {
  margin-top: 20px;
  span {
    margin-right: 40px;
  }
}
.scenF {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .scenF-content {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    .scenF-detail {
      height: 36px;
      line-height: 36px;
      padding-left: 20px;
      padding-right: 20px;
      border: 1px solid #9aa1af;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      .el-icon-circle-close {
        transform: translateY(3px);
      }
    }
  }
}
.dotAll {
  display: flex;
  align-items: center;
  justify-content: center;
  .dot {
    font-size: 20px !important;
  }
}
</style>